<template>
  <div class="app-container">

      <el-card>
        <div slot="header" class="clearfix">
          <span>组织信息</span>
        </div>
        <div>
          <el-form :model="department" ref="departmentForm" :rules="rules">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="名称" prop="name">
                <el-input  v-model="department.name"  auto-complete="on"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="代码" prop="code">
                <el-input  v-model="department.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="父级组织" prop="parentId">
                <el-popover
                  ref="popover"
                  placement="bottom-end"
                  width="380"
                  v-model="treeShow"
                  trigger="click">
                  <div style="text-align: right; margin: 0">
                    <el-tree
                      :data = "treeData"
                      node-key="id"
                      @node-click="setSelectedTreeNode"
                      ref="tree"
                      accordion
                      :props="defaultProps">
                   <span slot-scope ="{ node, data }">
                          <span>{{ node.label }}</span>
                      </span>
                    </el-tree>
                  </div>
                </el-popover>
                <el-input disabled v-model="department.parentName" v-popover:popover></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="6">
               <el-form-item label="排序" prop="orderNum">
                 <el-input  v-model="department.orderNum"></el-input>
               </el-form-item>
             </el-col>

             <el-col :span="6">
               <el-form-item v-show="department.id"  label="是否可用" prop="disabled">
                 <el-switch  v-model="department.disabled"> </el-switch>
               </el-form-item>
             </el-col>
           </el-row>
          </el-form>
        </div>
      </el-card>
      <br>
      <my-dnd-list ref="myDndList" :list1="department.leaders"  list1Title="已选负责人" list2Title="可选负责人"></my-dnd-list>



    <el-row>
      <el-col :span="5" :offset="8">
        <el-button type="primary" round @click="submitEdit">确定</el-button>
      </el-col>

      <el-col :span="5">
        <el-button type="danger" round @click="clearModel">清空</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import { saveOrUpdate,getDepartmentInfoById,getDepartmentListPage } from '@/api/sys/department/';
  import {getUserListPage} from '@/api/sys/user/';
  import MyDndList from './MyDndList'
  export default {
    name:'editDepartment',
    components: { MyDndList },
    data() {
      return {
        treeData:[{
        }],
        treeShow:false,
        department:{
          leaderIds:[],
          disabled: true,
        },
        filters:{
          displayName:'',
          disabled: true,

          phone:'',
          page:1,
          total:0,
          limit:10,
        },
        defaultProps: {
          children: 'children',
          label: 'name',
          id:'id',
          disabled:function (data, node) {
            if(data.disabled){
              return false;
            }else{
              return true;
            }
          }
        },
        rules: {
          code: [
            {required: true, message: '请输入代码', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'}
          ]
        },
      }
    },
    activated(){
      this.init(this.$route.query.id);
    },
    methods: {
      loadingDepartmentTree(id) {
        let that = this;
        getDepartmentListPage({}).then(function (result) {
          let {data,code} = result.data;
          that.treeData= [];
          data.forEach((item) =>{
            that.treeData.push(item);
          });

          if(id){
            that.getDepartmentInfoByIdHandle(id);
          }
        }).catch(function (error) {

        });
      },
      getDepartmentInfoByIdHandle(id){
        getDepartmentInfoById(id).then(result=>{
            let {data,code,msg} = result.data;
            if(code === 0){
                this.department = data;
                this.setSelectedTreeNode(null,this.$refs.tree.getNode(this.department.parentId),null);
            }
        }).catch();
      },
      clearModel(){
        this.$refs.departmentForm.resetFields();
      },

      setSelectedTreeNode(data,node,tree){
          if(node){
            this.department.parentId=node.data.id;
            this.department.parentName=node.data.name;
            this.treeShow=false;
          }

      },

      handleSizeChange(val) {
        this.filters.limit = val;
        this.searchUser();
      },
      handleCurrentChange(val) {
        this.filters.page = val;
        this.searchUser();
      },
      init(id){
        this.loadingDepartmentTree(id);

        this.searchUser();

      },

      searchUser(){
        let that = this;
        getUserListPage(that.filters).then(function (response) {
          const result = response.data;
          let {totalCount,list } = result.data;
          that.users= [];
          that.filters.total = totalCount;
          list.forEach((item) =>{
            that.users.push(item);
          });
        }).catch(function (error) {
        });
      },
      submitEdit(){
        let that = this;
        that.department.leaderIds=[]
        that.$refs.myDndList.list1.forEach(item=>{
          that.department.leaderIds.push(item.id);
        })

        saveOrUpdate(that.department).then(function (result) {
          let {code,msg} =result.data;
          if(code == 0){
            that.$message({
              type: 'success',
              message: msg
            });
          }else{
            that.$message.error('执行失败,'+msg);
          }
        }).catch(function (error) {
        });

      },
    }
  }

</script>
<style>
</style>
